<template>
  <div class="login-page">
    <nav-bar>用户登录</nav-bar>
    <div class="login-page__header">
      <van-image src="https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png"/>
      <div class="login-page__content">
        <van-form @submit="submit">
          <van-cell-group inset>
            <van-field
                v-model="loginState.email"
                name="邮箱"
                label="邮箱"
                placeholder="请输入邮箱"
                :rules="[{ required: true, message: '请填写邮箱' }]"
            />
            <van-field
                v-model="loginState.password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" color="#44b883" native-type="submit">
              登录
            </van-button>
          </div>
        </van-form>
        <div class="register-link" @click="router.push({
        path:'/register',
        })">
          没有账号，立即注册
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import NavBar from "@/components/common/navbar/NavBar.vue";
import {loginState} from "@/views/profile/state";
import {useRouter} from "vue-router";

const router = useRouter();
import {login} from "@/network/api/modules/profile";
import {showSuccessToast} from "vant";
import {useStore} from "@/store/index";

const store = useStore();
function submit() {
  login(loginState).then((res:any) => {
    console.log(res);
    showSuccessToast("登录成功");
    window.localStorage.setItem("token", res.access_token);
    store.commit('setIsLogin', true);
    setTimeout(() => {
      router.back();
    }, 500);
    loginState.password = "";
  });
}
</script>
<style lang="scss" scoped>
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fcfcfc;

  &__header {
    margin-top: 20px;
  }

  &__content {
    margin-top: 20px;
  }

  .register-link {
    color: #42b983;
    margin-top: 20px;
    text-decoration: underline;
    font-size: 20px;
  }
}
</style>